<template>
  <div class="vue-box">
    <div class="c-panel">
		<el-row>
			<el-col :span="24" :xs="24">
				<!--模糊查询-->
				<el-form :inline="true" size="small">
					<el-form-item label="操作系统：">
						<el-input type="text" size="small" v-model="query.platformType" placeholder="模糊查询"></el-input>
					</el-form-item>
					<el-form-item label="IP地址：">
						<el-input type="text" size="small" v-model="query.ip" placeholder="模糊查询"></el-input>
					</el-form-item>
					<el-form-item label="城市：">
						<el-input type="text" size="small" v-model="query.city" placeholder="模糊查询"></el-input>
					</el-form-item>
					<el-form-item>
						<span slot="label">
							<span class="span-box">
							<el-tooltip style="diaplay:inline" effect="dark" content="城市标签快速选择，只会对城市进行筛选" placement="top">
								<i class="el-icon-question" />
								</el-tooltip>
							</span>
						</span>
						<el-radio-group v-model="cityRadio" size="small" @input="citySelect">
							<!--不想给定默认值，但是不给报错，就整个不展示的选项-->
							<el-radio-button v-if="false" label=""></el-radio-button>
							<el-radio-button label="合肥">合肥</el-radio-button>
							<el-radio-button label="太原">太原</el-radio-button>
							<el-radio-button label="上海">上海</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<br/>
					<el-form-item label="访问日期：">
						<el-date-picker type="date" size="small" v-model="query.startTime" value-format="yyyy-MM-dd" placeholder="开始日期"></el-date-picker> - 
						<el-date-picker type="date" size="small" v-model="query.endTime" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="f5()">查询</el-button>
					</el-form-item>
				</el-form>
				<!--全局功能按钮-->
				<el-row :span="24">
						<el-col :span="1.5" class="firstBtn">
							<el-button type="info" plain size="small" icon="el-icon-refresh" @click="query.pageNo = 1; f5('')">重置</el-button>
						</el-col>
						<el-col :span="1.5" class="btn">
							<el-button type="danger" plain size="small" icon="el-icon-delete" @click="del('batch')">删除</el-button>
						</el-col>
						<el-col :span="1.5">
							<el-button type="primary" plain size="small" icon="el-icon-refresh-left" @click="toggleSelection()">取消选择</el-button>
						</el-col>
				</el-row>
				<!--数据列表-->
				<el-table :data="tableData" ref="multipleTable"  v-loading="state.loading" size="medium" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="40"></el-table-column>
					<el-table-column label="编号" type="index"></el-table-column>
					<el-table-column label="IP地址"  prop="ip" width="180"></el-table-column>
					<el-table-column label="城市"  prop="city" width="180"></el-table-column>
					<el-table-column label="浏览器类型"  prop="browserType" width="180"></el-table-column>
					<el-table-column label="操作系统"  prop="platformType" width="180"></el-table-column>
					<el-table-column label="来访时间"  prop="createTime" width="180"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="s">
							<el-button type="danger" size="mini" @click="state.delDialogVisible=true,info=s.row">
								<i class="el-icon-delete el-icon--left"></i>删除</el-button>	
						</template>
					</el-table-column>
				</el-table>
				<!--对话框相关-->
				<el-dialog title="删除提示" :visible.sync="state.delDialogVisible" :modal-append-to-body='false' 
				width="30%" :before-close="handleClose">
						<span >确定删除选择的访问记录？</span>
						<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="del()">确 定</el-button>
						<el-button @click="state.delDialogVisible=false">取 消</el-button>
						</span>
				</el-dialog>
				<!-- 分页 -->
				<div class="page-box">
					<el-pagination background
						layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="query.pageNo" 
						:page-size.sync="query.pageSize" 
						:total="dataCount" 
						:page-sizes="[1, 5, 10, 20, 30, 100]" 
						@current-change="f5()" 
						@size-change="f5()">
					</el-pagination>
				</div>
			</el-col>
		</el-row>
	</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
		    //查询参数
        query:{
          ip:'',
          city:'',
          startTime: '',
		      endTime: '',
          pageNo:1,
          pageSize:10
        },
		    //列表数据
        tableData: [],
		    //选择项
        multipleSelection: [],
        info:'',//当前操作数据
        cityRadio:'',//城市筛选标签
        dataCount:0,//数据总数
        state:{
          loading:false,
          delDialogVisible:false,
        }
      }
    },
    methods: {
		//列表刷新
		f5(param){
			this.state.loading=true;
			let params=param===undefined?this.query:param;
      this.request('/api/visit/list',params).then(res=>{
        if(!res){return}
        this.dataCount=res.data.total
        this.tableData=res.data.records
        if(params==''){
          this.query={pageNo:1,pageSize:10}
          this.cityRadio=''
        }
        this.state.loading=false;
      })
		},
		//城市标签筛选
		citySelect(){
			console.log(this.cityRadio);
			let params={city:this.cityRadio};
			this.f5(params)
		},
		//删除
		del(type){
			this.state.loading=true;
			let params=[];
			if(type=='batch'){
				params=this.multipleSelection;
			}else{
				params.push(this.info)
			}
      this.requestJson('/api/visit/del',params,{'Content-Type': 'application/json'}).then(res=>{
        if(!res){return}
        this.$message.success("删除成功！")
        this.f5()
      })
      this.state.loading=false;
		},
		//取消当前的选择
		toggleSelection(rows) {
			if (rows) {
			rows.forEach(row => {
				this.$refs.multipleTable.toggleRowSelection(row);
			});
			} else {
			this.$refs.multipleTable.clearSelection();
			}
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		//对话框取消
		handleClose(done) {
		this.$confirm('确认关闭？')
			.then(_ => {
			done();
			})
			.catch(_ => {});
		}
	},
	mounted(){
		this.f5()
	}
  }
</script>

<style scoped>
/**模糊查询字体样式 */
/deep/.c-panel .el-form-item__label, .c-panel .c-label {
	font-size:14px;
	font-weight:900
}
/*表格样式 */
/deep/ .el-table {
  margin-left:10px;
}
/deep/ .el-table th.el-table__cell {
  background-color: aliceblue;
}
/*模糊搜索表单右移5px，对齐全局按钮和数据table*/
/deep/.c-panel .el-form{
	margin-left:-5px
}
/*按钮与表格的对齐间距等等 */
.firstBtn{
  padding-left:10px;
  padding-right:5px;
  margin-bottom: 5px;
}
.btn{
  padding-right:5px;
  margin-bottom: 5px;
}
/*分页左移10px */
.page-box{
	margin-left: 10px;
}
</style>